<template>
    <div class="ca-agent">
        <section-adv
            class=""
        ></section-adv>

        <template>
            <client-only>
                <section-form 
                    class="section-item content"
                    @update="formSubmit"
                    :isLogin="isLogin"
                ></section-form>
            </client-only>

            <section-list 
                v-if="isLogin"
                class="section-item content"
                ref="list" 
            ></section-list>
        </template>

    </div>
</template>

<script>
import {buildTdk} from '@config/tdk';

import SectionAdv from './section/adv.vue';
import SectionForm from './section/form.vue';
import SectionList from './section/list/index.vue';

export default {
    head() {
        return buildTdk('caAgent');
    },
    layout: 'client',
    components: {
        SectionAdv,
        SectionForm,
        SectionList,
    },
    data() {
        return {
            isLogin: null,
        };
    },
    methods: {
        formSubmit() {
            if(!this.$refs.list){ return };
            this.$refs.list.queryData();

            this.$refs.list.$el.scrollIntoView();
        },
    },
    mounted() {
        this.$store.dispatch('userinfo/checkIsLoginNoDoing',{
            login: ()=>{
                this.isLogin = true;
            },
            noLogin: () =>{
                this.isLogin = false;
            }, 
        });
    }
};
</script>

<style lang="scss" scoped>
    .ca-agent{
        padding-bottom: 75px;

        .section-item{
            background: white;

            & + .section-item{
                border-top: none;
            }
        }
    }

    .no-login{
        position: relative;

        .login-con{
            position: absolute;
            left: 50%; 
            top: 10%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px 0;
            width: 600px;
            text-align: center;
            box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.13);
        }
    }
</style>